// pages/Dashboard/DashboardStyles.js

export const paperSx = {
  variant: "outlined",
  sx: {
    backgroundColor: '#21262d', // GitHub dark panel background
    borderColor: '#30363d', // GitHub dark border
  }
};

export const sectionButtonSx = {
  color: '#f0f6fc', // Off-white text instead of blue
  backgroundColor: '#21262d', // GitHub dark background
  border: '1px solid #30363d', // GitHub dark border
  borderRadius: '6px',
  padding: '16px 24px', // Larger padding
  textTransform: 'none',
  fontWeight: 500,
  fontSize: '1.25rem', // Much larger text (20px)
  minHeight: '64px', // Taller buttons
  justifyContent: 'flex-start',
  width: 'auto', // Not fullWidth
  minWidth: '200px', // Minimum width for consistency
  '&:hover': {
    backgroundColor: '#30363d',
    borderColor: '#484f58',
    color: '#ffffff', // Pure white on hover
  },
  '&:active': {
    backgroundColor: '#262c36',
  }
};

export const backButtonSx = {
  color: '#f0f6fc', // Off-white to match theme
  backgroundColor: '#21262d',
  border: '1px solid #30363d',
  borderRadius: '50%',
  padding: '12px',
  '&:hover': {
    backgroundColor: '#30363d',
    color: '#ffffff',
  }
};

export const backButtonContainerSx = {
  display: 'flex',
  justifyContent: 'center',
  marginBottom: '16px'
};

